<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DashBoard</title>
    <script src="../static/js/socket.io.js"></script>
    <script src="../static/js/jquery-3.1.1.min.js"></script>
    <script src="../static/js/echarts.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: beige;
        }
    </style>
</head>
<body>
<div style="height:60px;font-size: 36px;background-color: wheat;text-align: center">
    <span>学生实时管理系统</span>
</div>

<div id="div1" style="width: 40%;height: 400px;margin: 10px auto;background-color: lightyellow"></div>
<div id="div2" style="width: 40%;height: 400px;margin: 10px auto;background-color: lightyellow"></div>
<div id="div3" style="width: 40%;height: 400px;margin: 10px auto;background-color: lightyellow"></div>
<div id="div4" style="width: 40%;height: 400px;margin: 10px auto;background-color: lightyellow"></div>
<div id="div5" style="width: 40%;height: 400px;margin: 10px auto;background-color: lightyellow"></div>

<script type="text/javascript" charset="utf-8">
    let socket = io('http://' + document.domain + ':' + document.location.port);
    socket.on('task1', function (message) {
        let data = []
        for (const key in message) {
            data.push({
                value: message[key],
                name: key === "0" ? "男" : "女"
            })
        }
        updateDiv1(data)

    });
    socket.on('task2', function (message) {
        let xAxis = Object.keys(message)
        let data = xAxis.map(key => message[key])
        updateDiv2(xAxis, data)
    });
    socket.on('task3', function (message) {
        let xAxis = Object.keys(message)
        let data = xAxis.map(key => message[key])
        updateDiv3(xAxis, data)
    });


    function updateDiv1(data) {
        let chartDom = document.getElementById("div1");
        let myChart = echarts.init(chartDom);
        let option;

        option = {
            title: {
                text: '男女人数各自总和',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '人数',
                    type: 'pie',
                    radius: '50%',
                    label: {
                        show: false,
                        position: 'center'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 名';
                        }
                    },
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);

    }

    function updateDiv2(xAxis, data) {
        let chartDom = document.getElementById("div2");
        let myChart = echarts.init(chartDom);
        let option;

        option = {
            title: {
                text: "各个学期男女人数总和",

            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data,
                    type: 'line',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 名';
                        }
                    },
                    areaStyle: {}
                }
            ]
        };

        option && myChart.setOption(option);

    }

    function updateDiv3(xAxis, data) {
        let chartDom = document.getElementById("div3");
        let myChart = echarts.init(chartDom);
        let option;

        option = {
            title: {
                text: "在籍和不在籍男女生人数"
            },
            tooltip: {
                trigger: 'item'
            },
            xAxis: {
                type: 'category',
                data: xAxis
            },
            yAxis: {
                name: "人数",
                type: 'value'
            },
            series: [
                {
                    data: data,
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 名';
                        }
                    },
                }
            ]
        };

        option && myChart.setOption(option);

    }
</script>
<script type="text/javascript">

</script>

<script>
    // 使用 fetch 发送GET请求到Flask端
    fetch('/data')
        .then(response => response.json()) // 解析返回的JSON数据
        .then(data => {
            div4(data)
        })
        .catch(error => {
            console.error('Error:', error);
        });

    function div4(data) {
        let chartDom = document.getElementById("div4");
        let myChart = echarts.init(chartDom);
        let option;
        option = {
            title: {
                text: '各个班级的男女的人数',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [

                {
                    label: {
                        show: false,
                        position: 'center'
                    },
                    name: '人数',
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 名';
                        }
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);

    }
</script>
<script>
    // 使用 fetch 发送GET请求到Flask端
    fetch('/data1')
        .then(response => response.json()) // 解析返回的JSON数据
        .then(data => {
            div5(data["xAxis"], data["datas"])
        })
        .catch(error => {
            console.error('Error:', error);
        });

    function div5(xAxis, data) {
        let chartDom = document.getElementById('div5');
        let myChart = echarts.init(chartDom);
        let option;

        option = {
            title: {
                text: "不同学期各个班级的男女各自的人数",
                left: "center"
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxis,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    barWidth: '60%',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 名';
                        }
                    },
                    data: data
                }
            ]
        };

        option && myChart.setOption(option);

    }
</script>
</body>
</html>